<template>
  <div id="hotspot">
    <router-link to="/weekly/weeklyContent ">
      <div class="hotspot-cord">
        <p class="first-tit"><span class="author">田林</span>|<span class="timer">11天前</span>|<span class="type">前端</span>
        </p>
        <div class="tit">
          <p>推荐一款免费的Markdown编辑器，GitHub斩获22.8k Star！</p>
        </div>
        <div class="introduction">
          <div class="int-txt">
            <p>
              系列是继David Geary同名的三篇文章简介推出的，像一个功夫大师一样帮助您发展和磨练您的JSF2框架技能。
              Series, a follow-on to David Geary's three-article introduction of the same name, will help you develop and
              hone your JSF 2 framework skills like a kung fu master.
            </p>
          </div>
          <div class="display">
            <!--          <img src="" alt="图片">-->
            <div class="img"></div>
          </div>
        </div>
        <div class="volume">
          <p>&copy;<span>265</span>&copy; <span>62</span></p>
        </div>
      </div>
    </router-link>
    <router-link to="/home">
    <div class="hotspot-cord">
      <p class="first-tit"><span class="author">田林</span>|<span class="timer">11天前</span>|<span class="type">前端</span>
      </p>
      <div class="tit">
        <p>推荐一款免费的Markdown编辑器，GitHub斩获22.8k Star！</p>
      </div>
      <div class="introduction">
        <div class="int-txt">
          <p>
            系列是继David Geary同名的三篇文章简介推出的，像一个功夫大师一样帮助您发展和磨练您的JSF2框架技能。
            Series, a follow-on to David Geary's three-article introduction of the same name, will help you develop and
            hone your JSF 2 framework skills like a kung fu master.
          </p>
        </div>
        <div class="display">
          <!--          <img src="" alt="图片">-->
<!--          <div class="img"></div>-->
        </div>
      </div>
      <div class="volume">
        <p>&copy;<span>265</span>&copy; <span>62</span></p>
      </div>
    </div>
    </router-link>
  </div>
</template>

<script>
import {defineComponent} from 'vue';
export default defineComponent({
  name: "weeklyHotspot",
  setup(){
    const parentMint = (val) => {
      console.log(val)
    }
    return{
      parentMint
    }
  }
})
</script>

<style lang="less">
#hotspot {
  margin-top: -20px;
  .hotspot-cord {
    padding: 15px;
    border-top: 2px solid #F5F5F5;
    border-bottom: 2px solid #F5F5F5;
    .first-tit {
      color: #465059;
      span {
        margin: 0 15px;
      }
    }

    .tit {
      margin-left: 15px;

      p {
        font-weight: bold;
        font-size: 25px;
        margin: 10px 0;
        color: black;
      }
    }

    .introduction {
      display: flex;
      justify-content: space-between;
      margin-left: 15px;
      .int-txt{
        p{
          color: #465059;
        }
      }
      .display {
        .img {
          width: 204px;
          height: 124px;
          background-color: #3C50E1;
          margin-left: 30px;
        }
      }
    }

    .volume{
      p{
        margin-left: 15px;
        color: #262626;
        span{
          margin: 0 5px;
        }
      }
    }
  }
}
</style>